<script setup lang="ts">
import { MainLayout } from '~/components/MainLayout';
import { Title } from '~/components/Title/index'
import { Swiper } from '~/components/swiper/index'
import ImgSwiper from '~/components/swiper/imgSwiper.vue'
import { Evaluate } from '~/components/evaluate'
import { Panels } from '~/components/panels'
import EvaluateOther from '~/components/evaluate/evaluateOther.vue'
import Imgs from '~/components/swiper/imgs.vue'
import AdCol from '~/components/adCol/index.vue'
import LayoutCol from '~/components/MainLayout/layoutCol.vue';
</script>

<template>
    <MainLayout :maxwidth="false">
        <div class="mx-auto w-[90%] mt-20px">
            <v-row>
                <v-col cols="12" sm="4">
                    <div class="h-full w-full pr-10 flex flex-col items-center justify-center">
                        <Title class="mb-0" title="Custom Embroidered Patches"
                            content="The maximum number of colors a pa">
                            <template #content>
                                <div class="w-350px">
                                    <EvaluateOther />
                                    Source high-quality custom products with ease.Connect directly with top-rated
                                    factories
                                    and
                                    <div>
                                        <ul class="mt-2 text-[14px] md:text-[14px] text-left! inline-block mx-auto">
                                            <li class="list-inside-red mb-1">Crafted with precision</li>
                                            <li class="list-inside-red  mb-1">Features merrowed borders and iron-on
                                                backings
                                            </li>
                                            <li class="list-inside-red  mb-1">Offers unique and customizable designs
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </template>
                            <!-- <template #contentBottom>
                        <EvaluateOther />
                    </template> -->
                        </Title>

                        <div class="mx-4">
                            <v-divider></v-divider>
                        </div>
                        <v-btn elevation="0" color="#1D498C" class="w-full! mt-4 text-white bg-[#1D498C]">
                            View All Custom Products
                        </v-btn>
                        <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white">
                            View All Custom Products
                        </v-btn>
                    </div>
                </v-col>
                <v-col cols="12" sm="8">
                    <div class="flex w-full">
                        <img src="https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp" class="m-1 flex-1 w-0"
                            alt="" v-img-auto></img>
                        <img src="https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp" class="m-1 flex-1 w-0"
                            alt="" v-img-auto></img>
                    </div>
                </v-col>
            </v-row>
            <div class="py-30px">
                <img src="/58.png" class="w-[90%] block mx-auto! hidden md:block" />
                <img src="/image copy 5.png" class="w-[80%] block mx-auto! md:hidden" />
            </div>
        </div>
        <!-- <LayoutCol>

        </LayoutCol> -->
        <LayoutCol>
            <AdCol :type="1" />
        </LayoutCol>
        <LayoutCol>
            <AdCol :type="2" />
        </LayoutCol>
        <LayoutCol>
            <ImgSwiper :list="[
                '/home/1.webp', '/home/3.webp', '/home/5.webp', '/home/6.webp',
                '/home/1.webp', '/home/3.webp', '/home/5.webp', '/home/6.webp'
            ]" />
        </LayoutCol>
        <LayoutCol>
            <Imgs :num="4" :list="['/show1/71.webp', '/show1/70.webp', '/show1/73.webp', '/show1/75.webp']"
                :imgAuto="false" />
            <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!">
                View All Custom Products
            </v-btn>
        </LayoutCol>
        <LayoutCol>
            <Imgs :num="4" :list="['/show1/71.webp', '/show1/70.webp', '/show1/73.webp', '/show1/75.webp']"
                :imgAuto="false" />
            <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!">
                View All Custom Products
            </v-btn>
        </LayoutCol>
        <LayoutCol>
            <Title title="Hear from our esteemed customers." content=" ">
                <template #contentBottom>
                    <EvaluateOther />
                </template>
            </Title>
            <Evaluate />
        </LayoutCol>
        <LayoutCol>
            呃 后面补充。。。
        </LayoutCol>
        <LayoutCol>
            <Panels title="Custom Embroidered Patches" />
        </LayoutCol>
        <LayoutCol>
            <Swiper :list="['', '', '']" height="auto" :type="'1'" :showBtn="true" :defaultAction="false">
                <Imgs :num="6" :colNum="3" :showContent="false" :imgAuto="'10/8'" :list="[
                    'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
                    'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
                    'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
                    'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
                    'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
                    'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
                    'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
                    'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
                ]" />
            </Swiper>
        </LayoutCol>
    </MainLayout>
</template>
